<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="container">
    <h3>新增产品</h3>
    <div class="insert-product">
      <form id="insert-form">
        <div class="item">
          <label for="productname">产品名称：</label>
          <input type="text" id="productname" name="productname" placeholder="请输入产品名称">
        </div>
        <div class="item">
          <label for="nuclear">核心成分:</label>
          <input type="text" id="nuclear" name="nuclear" placeholder="请输入核心成分">
        </div>
        <div class="item">
          <label for="weight">主材料重量(克)</label>
          <input type="number" id="weight" name="weight" placeholder="请输入主材料重量">
        </div>
        <div class="item">
          <label for="price">价格</label>
          <input type="number" id="price" name="price" placeholder="请输入价格">
        </div>
        <div class="item">
          <label for="description">产品描述</label>
          <textarea type="text" id="description" name="description" placeholder="请输入产品描述"></textarea>
        </div>
        <div class="item product-image">
          <label>上传产品图</label>
          <div class="preview">

          </div>
          <div class="error">图片上传失败</div>
          <input type="file" id="image" name="image" accept="image/*">
          <label for="image" class="upload-btn">+</label>
        </div>
        <div class="submit">
          <button type="submit" class="submit-btn" id="submit-btn">新增产品</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    let imgurl = ''
    const error = document.querySelector('.error')
    error.style.display = 'none' // 隐藏报错文件
    const preview = document.querySelector('.preview')
    // 获取file空间
    const inputFile = document.getElementById('image');
    // 监听change事件
    inputFile.onchange = function (e) {
      const file = inputFile.files[0];
      const formData = new FormData();
      formData.append('image', file);

      axios.post('http://localhost:3000/api/upload', formData, {
        // 请求头配置
        Headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((res) => {
        console.log(error.style)
        error.style.display = 'none'
        preview.style.display = 'block'

        imgurl = res.data.file.path
        const img = new Image()
        img.width = 100
        img.height = 100
        img.src = imgurl

        // 图片插入到preview
        preview.innerHTML = ''
        preview.appendChild(img)

      }).catch((err) => {
        console.log(err, '--err')
        error.style.display = 'block'
        preview.style.display = 'none'
      })
    }

    // 实现新增产品功能
    const submitBtn = document.getElementById('submit-btn')
    const form = document.getElementById('insert-form')
    submitBtn.onclick = function (e) {
      // 阻止默认行为
      e.preventDefault();
      // 获取表单数据
      const formData = new FormData(form);
      const data = {
        productname: formData.get('productname'),
        nuclear: formData.get('nuclear'),
        weight: formData.get('weight'),
        price: formData.get('price'),
        description: formData.get('description'),
        image: imgurl
      }
      console.log(formData.get('productname'), '--ss')
      axios.post('http://127.0.0.1:3000/api/products', data, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then((res)=>{
        console.log(res,'--res--')
      }).catch((err)=>{
        console.log(err,'--err')
      })
    }
  </script>
</body>

</html>